<template>
  <div class="segmented-report-container">
    <div class="header-actions">
      <div class="copy-btn" @click="handleCopy">
        <img src="@/icons/svg/minute/copy_icon.svg" alt="copy" />
      </div>
    </div>
    <van-empty v-if="topicLabResults.length === 0" description="暂无内容" />
    <van-list v-else finished-text="没有更多了">
      <div
        class="cell-container"
        v-for="(item, index) in topicLabResults"
        :key="index"
        @click.stop="clickCell(item)"
      >
        <div class="time-line">
          <p>{{ item.beganTime }}</p>
          <div
            :class="`dotted-line ${index === 0 ? 'dotted-line-first' : ''} ${
              index === topicLabResults.length - 1 ? 'dotted-line-last' : ''
            }`"
          >
            <div class="line-dot1" v-if="index !== 0"></div>
            <div class="color-view"></div>
            <div class="line-dot"></div>
          </div>
        </div>

        <div class="content">
          <div class="cell-title">{{ item.value }}</div>
          <div class="cell-value">{{ item.summary }}</div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { mapState } from "pinia";
import { useMinutesStore } from "@/store";
import { timeAddTS } from "@/utils/timeTool";
import { showToast } from "vant";
import { addToClipboard } from "/src/utils/stringTool.js";

export default {
  name: "summarySegmentedReport",
  computed: {
    ...mapState(useMinutesStore, {
      topicLabResults: "getTopicLabResults",
      recordInfo: "recordInfo",
    }),
  },
  methods: {
    clickCell(item) {
      console.log("clickCell: ", item);
    },

    beganTime(item) {
      return timeAddTS(this.recordInfo.startTime, item.bt);
    },

    handleCopy() {
      if (!this.topicLabResults || this.topicLabResults.length === 0) return;

      const text = this.topicLabResults
        .map((item) => {
          const time = this.beganTime(item);
          return `${time}\n${item.value}\n${item.summary}`;
        })
        .join("\n\n");

      addToClipboard(text);
      showToast("复制成功");
    },
  },
};
</script>

<style lang="less" scoped>
.segmented-report-container {
  display: flex;
  flex-direction: column;
  padding-top: 0px; // 为顶部按钮留出空间
}

.header-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 16px;

  .copy-btn {
    font-size: 18px;
    color: #606266;
    background-color: white;
    border-radius: 4px;
    padding: 6px;
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

    img {
      width: 20px;
      height: 20px;
    }
  }
}

.cell-container {
  display: flex;
  flex-direction: row;
  padding: 0 15px;

  .time-line {
    display: flex;
    flex-direction: row;
    margin-right: 12px;

    p {
      margin-top: 34px;
      width: 70px;
    }

    .dotted-line {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: start;
      height: 100%;
      margin-left: 12px;
      // .color-view {
      //   top: 40px;
      // }
    }

    .line-dot1 {
      height: 44px;
      border-right: 1px dashed #436bff;
    }

    .line-dot {
      flex: 1;
      border-right: 1px dashed #436bff;
    }

    .dotted-line-first {
      margin-top: 42px;
      height: calc(100% - 42px);
    }

    .dotted-line-last {
      margin-bottom: 100px;
      height: 42px;
    }

    .color-view {
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background-color: #436bff;
    }
  }

  .content {
    background: #f9fafc;
    border-radius: 8px;
    padding: 15px 20px;
    margin-top: 16px;

    .cell-title {
      font-weight: bolder;
      font-size: 16px;
      margin-bottom: 6px;
      color: #415461;
      text-align: left;
    }

    .cell-value {
      text-align: left;
      font-weight: 400;
      font-size: 14px;
      color: #8c8c8c;
      line-height: 24px;
    }
  }
}

// .dotted-line ::after {

// }
</style>
